<template>
  <section class="jumbotron">
    <h3 class="jumbotron-heading">Search Github Users</h3>
    <div>
      <input type="text" placeholder="enter the name" v-model="userName" />
      <button @click="searchUsers">Search</button>
    </div>
  </section>
</template>

<script>
import axios from 'axios'
export default {
  name: "Search",
  data() {
    return {
      userName: "",
    };
  },
  methods:{
  async searchUsers(){
   // 判断输入的值不能为空
  let val= this.userName.trim()
  if(!val){
   alert('搜索不能为空！')
   return
  }
   // 修改loading的状态
   this.$bus.$emit("isShowLoading",true)
   // 发送请求
   let res=await axios({
    method:"GET",
    url:"https://api.github.com/search/users",
    params:{
     q:val
    }
   })
   console.log(res.data.items);
   // 节约内存
   const users=res.data.items.map(item=>{
    return{
     id:item.id,
     login:item.login,
     html_url:item.html_url,
     avatar_url:item.avatar_url
    }
   })
   // 得到数据修改状态返送数据
   this.$bus.$emit("isShowLoading",false)
   this.$bus.$emit('addUsers',users)
   // 清空输入内容
   this.userName=''
   }
  }
};
</script>

<style>
</style>